<link rel="stylesheet" href="layui/css/layui.css">

<body class="layui-layout-body">

    <div style="padding: 15px;">
        <form class="layui-form" action=""  style="padding-right: 40px">
            <div class="layui-form-item">
                <label class="layui-form-label">名称</label>
                <div class="layui-input-block">
                    <input type="text" name="Sponsorname" lay-verify="required" autocomplete="off" placeholder="请输入" class="layui-input">
                </div>
            </div>
<!--            <div class="layui-form-item">
                <label class="layui-form-label">Logo</label>
                <div class="layui-input-block">
                    <input type="text" name="Logo" lay-verify="required" autocomplete="off" placeholder="请输入" class="layui-input"> 
                </div>
            </div>
            -->
            
             <div class="layui-form-item">
                <label class="layui-form-label">Logo</label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" id="test1">上传图片</button>
                    <input type="hidden" id="img_url" name="Logo" value="" />
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" width="100px" height="80px" id="demo1" src="" />
                        <p id="demoText"></p>
                    </div>
                </div>
            </div>
            
            
            <div class="layui-form-item">
                <label class="layui-form-label">文本简介</label>
                <div class="layui-input-block">
                    <input type="text" name="Profile" lay-verify="required" autocomplete="off" placeholder="请输入" class="layui-input">
                </div>
            </div>
	<div class="layui-form-item">
                <label class="layui-form-label">链接</label>
                <div class="layui-input-block">
                      <input type="text" name="Link" lay-verify="required" autocomplete="off" placeholder="请输入" class="layui-input">
                   
                </div>
            </div>	
            
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" type="button" lay-submit="" lay-filter="add">立即添加</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="layui/layui.js"></script>
    <script>
              layui.use(['table', 'form', 'upload'], function() {
            var table = layui.table;
            var form = layui.form;
            var $ = layui.jquery;
            var upload = layui.upload;
                var uploadInst = upload.render({
                elem: '#test1',
                url: 'http://svcsa.org/uploadimage',
                acceptMime: 'image/*',
                multiple: true,
                before: function(obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result) {
                        $('#demo1').attr('src', result); //图片链接（base64）
                    });
                },
                done: function(res) {
                    //如果上传失败
                    if (res.code > 0) {
                        return layer.msg('上传失败');
                    }
                    //上传成功
                    console.log(res);
                    picture = res.data.savename;
                    $("#img_url").attr("value", picture)
                },
                error: function() {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText1');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function() {
                        uploadInst.upload();
                    });
                }
            });
            form.on('submit(add)', function(data) {
                var index = parent.layer.getFrameIndex(window.name);
                $.ajax({
                    url:'http://svcsa.org/Sponsor' ,
                    type : 'POST',
                    dataType : 'json',
                    data : {
                        Sponsorname: data.field.Sponsorname,
                        Logo: data.field.Logo,
                        Profile: data.field.Profile,
			Link: data.field.Link,
                        Logo: $("#img_url").val(),
                    },
                    header:{
                        Accept:'application/json'
                    },
                    success:function(data){
                        layer.msg('添加成功', {
                            icon: 1,
                            time: 1500
                        }, function() {
                            parent.layer.close(index);
                        });
                    },
                    error:function(data){
                        console.log(data)
                    }
                });

            });
        });
    </script>

</body>